<template>
  <div>
    <div class="top">
      <Search @search="search">
        <template>合作商搜索</template>
      </Search>
    </div>
    <div class="bottom">
      <div class="bottom-top">
        <el-button
          type="warning"
          icon="el-icon-circle-plus-outline"
          @click="addCooperate"
          >新建</el-button
        >
      </div>
      <div class="bottom-bot">
        <div class="block">
          <!-- 列表区域 -->
          <el-table :data="regionList" style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="合作商名字"
              width=""
            ></el-table-column>
            <el-table-column prop="account" label="账号" width="">
            </el-table-column>
            <el-table-column prop="vmCount" label="设备数量" width="">
            </el-table-column>
            <el-table-column prop="ratio" label="分成比例" width="">
            </el-table-column>
            <el-table-column prop="contact" label="联系人" width="">
            </el-table-column>
            <el-table-column prop="phone" label="联系电话" width="">
            </el-table-column>
            <el-table-column prop="" label="操作" width="250">
              <template #default="{ row }">
                <el-link
                  type="primary"
                  style="margin-right: 5px"
                  :underline="false"
                  @click="reset(row)"
                  >重置密码</el-link
                >
                <el-link
                  type="primary"
                  style="margin-right: 5px"
                  :underline="false"
                  @click="see(row)"
                  >查看详情</el-link
                >
                <el-link
                  type="primary"
                  style="margin-right: 5px"
                  :underline="false"
                  @click="changeCo(row)"
                  >修改</el-link
                >
                <el-link
                  type="danger"
                  style="margin-right: 5px"
                  :underline="false"
                  @click="delCooperate(row.id)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
          <FootBtn
            :totalCount="totalCount"
            :region="this.region"
            @goup="goup"
          />
        </div>
      </div>
    </div>
    <!-- 新建弹窗 -->
    <el-dialog
      :title="changeAdd === 1 ? '新增合作商' : '修改合作商'"
      :visible.sync="dialogThree"
      width="30%"
    >
      <span>
        <el-form ref="form" :model="form" label-width="100px" :rules="rules" @close="addQu">
          <el-form-item label="合作商名称" prop="name">
            <el-input v-model="form.name" maxlength="10" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
            <el-input v-model="form.contact" maxlength="15" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="mobile">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="分成比例%" prop="ratio">
            <el-input-number
              v-model="form.ratio"
              controls-position="right"
              style="width: 100%"
              placeholder="请输入内容"
              :min="0"
              :max="100"
            >
            </el-input-number>
          </el-form-item>
          <template v-if="changeAdd === 1 ? true : false">
            <el-form-item label="账号" prop="account">
              <el-input v-model="form.account" maxlength="10" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" maxlength="10" show-word-limit></el-input>
            </el-form-item>
          </template>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addQu">取 消</el-button>
        <el-button type="primary" @click="addCoo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改合作商弹窗 -->
    <el-dialog title="查看详情" :visible.sync="dialogfour" width="30%">
      <span>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              合作商名称：{{ formDa.name }}
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              联系人：{{ formDa.contact }}
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              电话：{{ formDa.mobile }}
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
              分成比例：{{ formDa.ratio }}%
            </div></el-col
          >
        </el-row>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogfour = false">取 消</el-button>
        <el-button type="primary" @click="dialogfour = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import FootBtn from '@/components/footbtn.vue'
import Search from '@/components/search.vue'
import {
  partners,
  delcooperate,
  cooperate,
  changeCooperate,
  reset,
} from '@/api/homePage'
import '@/styles/second/region.scss'
export default {
  components: {
    FootBtn,
    Search,
  },
  async created() {
    this.getone()
  },
  data() {
    return {
      // 请求参数
      regionList: [], //每次请求的列表
      totalCount: '', //总条数
      region: {
        pageIndex: 1,
        pageSize: 10,
      },
      dialogThree: false,
      form: {
        id: '',
        name: '', //合作商名字
        account: '', //账号
        password: '', //密码
        ratio: '', //分成比例
        contact: '', //联系人
        phone: '', //联系电话
        mobile: '', //手机号
      },
      rules: {
        name: [
          { required: true, message: '请输入合作商名字', trigger: 'blur' },
        ],
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
          ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }],
        ratio: [{ required: true, message: '请输入分成比例', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
          ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          {pattern: /^1[3-9]\d{9}$/, message: '联系电话格式不正确', trigger: 'blur'}
          ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}
          ],
      },
      changeAdd: 0,
      dialogfour: false,
      formDa: {},
    }
  },
  methods: {
    // 换页
    goup(val) {
      this.region.pageIndex = this.region.pageIndex + val
      this.getone()
    },
    // 查看
    see(row) {
      console.log(row)
      this.formDa = row
      this.dialogfour = true
    },
    // 重置密码
    async reset(row) {
      this.$alert('是否重置密码', '提示', {
        confirmButtonText: '确定',
        callback: async () => {
          await reset(row.id)
          this.$message.success('重置成功')
        },
      })
    },
    // 删除
    async delCooperate(id) {
      this.$alert('是否删除', '提示', {
        confirmButtonText: '确定',
        callback: async () => {
          await delcooperate(id)
          this.$message.success('删除成功')
          this.getone()
        },
      })
    },
    // 新建
    addCooperate() {
      this.changeAdd = 1
        this.form.ratio = 0
        this.form.name = ''
       this.form.account =''
        this.form.password= '', //密码
        this.form.ratio= '', //分成比例
        this.form.contact= '', //联系人
        this.form.phone= '', //联系电话
        this.form.mobile= '', //手机号
       
      this.addCooperates()
    },
    // 显示弹窗
    addCooperates() {
      this.dialogThree = true
    },
    addQu(){
       this.dialogThree = false
       this.form.ratio = 0
       this.form.account =''
        this.form.password= '', //密码
        this.form.ratio= '', //分成比例
        this.form.contact= '', //联系人
        this.form.phone= '', //联系电话
        this.form.mobile= '', //手机号
       this.$refs.form.resetFields()
    },
    // 调接口增加修改
    async addCoo() {
      if (this.changeAdd === 1) {
        await cooperate(this.form)
        this.dialogThree = false
        this.getone()
        this.$refs.form.resetFields()
        this.$message.success('添加成功')
      } else if (this.changeAdd === 2) {
        await changeCooperate(this.form)
        this.dialogThree = false
        this.getone()
        this.$refs.form.resetFields()
        this.$message.success('修改成功')
      }
    },
    // 搜索
    search(val) {
      if (this.region.name === '') {
        this.getone()
      }
      this.region.name = val
      this.getone()
    },
    // 修改合作商
    changeCo(row) {
      this.changeAdd = 2
      console.log(row)
      ;(this.form.id = row.id),
        (this.form.name = row.name), //合作商名字
        (this.form.account = row.account), //账号
        (this.form.password = row.password), //密码
        (this.form.ratio = row.ratio), //分成比例
        (this.form.contact = row.contact), //联系人
        (this.form.phone = row.phone), //联系电话
        (this.form.mobile = row.mobile), //手机号
        console.log(this.form)
      this.addCooperates()
    },
    async getone() {
      const { data } = await partners(this.region)
      this.regionList = data.currentPageRecords
      this.totalCount =String( data.currentPageRecords.length)
    },
  },
}
</script>

<style>
.el-form-item {
  vertical-align: baseline;
}
</style>
